<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="set">设置cookie</button>
    <button class="get">获取cookie</button>
    <button class="edit">修改cookie</button>
    <button class="delete">删除cookie</button>
</body>
<script>

    // 如何存储cookie?  (对应键名存储,没有就新增,有就修改)
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回
    // (4) cookie可以设置过期时间,和存储路径

    // 如何获取cookie
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回,每条数据之间用"; "分隔
    // (4) cookie可以设置过期时间,和存储路径

    // 如何修改cookie?  
    // 对应键名存储,没有就新增,有就修改

    // 如何删除cookie?
    // 默认情况下,存储的cookie在浏览器关闭时会过期,并被删除,如果设置了过期时间,cookie将会在指定之间之后过期(cookie过期后,无法被获取,但是不会被删除 => 关闭浏览器,刷新页面才会被删除)

    // 如果想删除cookie => 将cookie的过期时间改为已经过去的时间  (cookie就无法获取,并在浏览器关闭,刷新时被删除)


    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var deleteBtn = document.getElementsByClassName("delete")[0];



    setBtn.onclick = function () {
        console.log("存储cookie");

        setCookie("user", "a123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "123123", 30 * 60);
        setCookie("email", "123123@qq.com", 365 * 24 * 60 * 60);
        setCookie("phone", "17386141517");
    }

    getBtn.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
    }

    editBtn.onclick = function () {
        console.log("修改cookie");

        setCookie("user", "b123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "321321", 30 * 60);
        setCookie("email", "321321@qq.com", 365 * 24 * 60 * 60);
        setCookie("phone", "17386555555");
    }

    deleteBtn.onclick = function(){
        setCookie("user", "", -1);
        setCookie("pwd", "", -1);
        setCookie("email", "", -1);
        setCookie("phone", "",-1); 

        deleteCookie("user");
        deleteCookie("pwd");
        deleteCookie("phone");
        deleteCookie("email");

        location.reload();
    }




</script>

</html>